<template>
  
  <div class="filter">
    <span :class="{'active': tab == 'allTodos'}" @click="$emit('change-tab', 'allTodos')">all</span>
    <span :class="{'active': tab == 'doneTodos'}" @click="$emit('change-tab', 'doneTodos')">done</span>
    <span :class="{'active': tab == 'noDoneTodos'}" @click="$emit('change-tab', 'noDoneTodos')">nodone</span>
  </div>

</template>

<style>
  .filter span {
    display: inline-block;
    padding: 4px 8px;
    background: #eee;
  }
  .filter span.active {
    background: #f40;
  }
</style>

<script>

  export default {
    props: ['tab']
  }


</script>